import React, { Component } from "react";

import FilterFooter from "../../../../components/FilterFooter";

import styles from "./index.module.css";

import {Spring} from 'react-spring/renderprops'

export default class FilterMore extends Component {
  state = {
    // 存储被选中的数值
    // selectedValues: [],
    selectedValues: this.props.defaultSelectedValues
  };

  // 封装标签选中方法
  onTagClick = (value) => {
    const { selectedValues } = this.state
    const newSelectedValues = [...selectedValues]
    // console.log(value)
    // 判断当前被点击的值是否包含在被选中的数组中 如果没有被选中 就添加到数组,如果已经被选中过 再次点击 就从数组中删除

    // console.log(selectedValues.indexOf(value));
    if (selectedValues.indexOf(value) === -1) {
      // 反之 没被选中过 就添加到数组中
      newSelectedValues.push(value)
    } else {
      // 表示当前项已被选中过 此时要把它从数组中删除
      const index = selectedValues.findIndex( item => item === value )
      // console.log(index);
      newSelectedValues.splice(index,1)
    }
    this.setState({
      selectedValues: newSelectedValues
    })
  }

  // 渲染标签
  renderFilters(data) {
    const { selectedValues } = this.state
    // 高亮类名： styles.tagActive
    return data.map((item) => {
      const isSelected = selectedValues.indexOf(item.value)
      // console.log(isSelected);
      return (
        <span key={item.value}
          className={[styles.tag, isSelected !== -1 ? styles.tagActive : ''].join(" ")}
          onClick={() => { this.onTagClick(item.value) } }
        >
          {item.label}
        </span>
      )
    });
  }

  // 清除事件
  onCancel = () => {
    // 清空所有选中项
    this.setState({
      selectedValues:[]
    })
  }
  onOk = () => {
    const { type, onSave } = this.props
    // onSave是父组件的方法 把子组件中选中的值传给父组件
    onSave(type,this.state.selectedValues)
  }

  // 实现遮罩层的动画效果
  renderMaskMore() {
    const { onCancel, type } = this.props

    const isHide = type !== 'more'
    return (
      <Spring from={{ opacity: 0 }} to={{ opacity: isHide ? 0 : 1 }}>
        {props => {
          // 说明遮罩层已经完成动画效果，隐藏了
          if (props.opacity === 0) {
            return null
          }

          return (
            <div style={props} className={styles.mask} onClick={ () => onCancel(type) }/>
          )
        }}
      </Spring>
    )
  }
  render() {
    const {
      data: { roomType, oriented, floor, characteristic }
    } = this.props;
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        {/* {<div className={styles.mask} onClick={ () => onCancel(type) }/>} */}
        { this.renderMaskMore() }

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter className={styles.footer} cancelText={'清除'} onCancel={this.onCancel} onOk={ this.onOk }/>
      </div>
    );
  }
}
